<template>
  <van-cell>
    <van-checkbox v-model="isDone" icon-size="24px"/>
    <div class="content">
      <h4>{{todo.title}}</h4>
      <div>{{todo.desc}}</div>
      <span>{{todo.date}}</span>
    </div>
  </van-cell>
</template>

<script>
export default {
  props: {
    todo: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      isDone: this.todo.isDone
    }
  },
  watch: {
    isDone () {
      this.$emit('toggle', this.isDone)
      this.$emit('input', {
        ...this.todo, isDone: this.isDone
      })
    }
  }
}
</script>

<style scoped>
  h4{margin:0;}
  >>> .van-cell__value {
    display: flex !important;
  }
  .content{
    margin-left: 20px;
  }
</style>
